import React from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import icon_logo_main from '../../assets/icon_main_logo.png';
import icon_wx_small from '../../assets/icon_wx_small.png';


export default function QuickLogin(props:any) {

const {changeLoginType} = props


  return (
    <View style={styles.root} >
      <Image style={styles.image} source={icon_logo_main} />
      <View style={styles.btn} >
        <TouchableOpacity style={styles.oneKeyLoginButton} activeOpacity={0.7} >
          <Text style={styles.oneKeyLoginTxt}>一键登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.wxLoginButton} activeOpacity={0.7} >
          <Image style={styles.icon_wx} source={icon_wx_small}  />
          <Text style={styles.oneKeyLoginTxt}>微信登录</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.otherButton} onPress={()=> {changeLoginType()}} >
          <Text style={styles.otherLoginTxt}>其他登录方式 {`>`}</Text>
        </TouchableOpacity>
      </View>
      
    </View>

  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 64,
    position:'relative'
  },
  image: {
    width: 160,
    resizeMode: 'contain',
    marginTop: 60
  },
  btn: {
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    marginBottom: 60,
  },
  oneKeyLoginButton: {
    backgroundColor: '#ff2442',
    width: '100%',
    height: 45,
    borderRadius: 30,
    marginBottom:15
  },
  oneKeyLoginTxt: {
    fontSize: 14,
    color: 'white',
    textAlign: 'center',
    lineHeight: 45
  },
  wxLoginButton:{
    width: '100%',
    height: 45,
    borderRadius: 30,
    marginBottom:15,
    alignItems:'center',
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#05c160'
  },
  icon_wx: {
    width: 40,
    height: 40,
  },
  otherButton:{
    width: '100%',
    height: 45,
    justifyContent:'center',
    alignItems:'center',
    marginBottom:15
  },
  otherLoginTxt:{
    fontSize:14,
    color:'#333'
  }
})
